<style type="text/css">
	.ganti-text{
		position:absolute;
		left:10px;
		top:89px;
		height: 256px;
		width: 256px;
		background: #545454;
		opacity: 0;
		color:transparent;
		cursor: pointer;
		padding-top:190px;
		padding-left:85px;
	}
	.ganti-text:hover{
		color: #fff;
		opacity: 0.3;
	}
	#dynamic{
		cursor: pointer;
		height: 256px;
		width: 256px;
		background: #545454 url("./uploads/default.png") no-repeat;
	}
/*	#dynamic:hover + .ganti-text{
		color:#fff;
	}*/
</style>
	<div class="row">
	    <div class="col-xs-12">
	        <div class="box box-primary">
	            <div class="box-header">
                <h3 class="box-title">Contoh Upload</h3>
	            </div><!-- /.box-header -->
	            <div class="box-body box-export-tools table-responsive">
								
								<h4>Ajax</h4>
								<!-- <button class="btn btn-sm btn-flat btn-success">Upload</button> -->
								<?php echo form_open_multipart('upload/do_ajax_upload', array('id' => 'ajaxform'));?>	
								<div id="dynamic">
									<img src="<?php echo base_url('uploads/default.png');?>" id="imageArea" style="cursor:pointer;">
								</div>
								<span style="display:none;"><input type="file" name="ajaxfile"/></span>
								<span class="ganti-text">Ganti gambar</span>
								<?php echo form_close();?>
								<hr>

								<h4>Reguler</h4>
								<font color="red"><?php echo isset($error1)?$error1:'';?></font>
								<?php echo form_open_multipart('upload/do_upload');?>
								<input type="file" name="userfile" size="20" />

								<br />

								<input type="submit" value="upload" />

								<?php echo form_close();?>
								
	            </div><!-- /.box-body -->
	        </div><!-- /.box -->                            
	    </div>
	</div>
	<script>
	// select the file input (using a id would be faster)
	$('input[name=ajaxfile]').change(function() { 
	    $('#ajaxform').ajaxForm({
	    	success: function(msg) {
	    		$('#dynamic').html(msg);	    		
		    },

	    }).submit();
	});

	$("#dynamic").click(function() {
	  $("input[name='ajaxfile']").click();
	});

	$(".ganti-text").click(function() {
	  $("input[name='ajaxfile']").click();
	});

	$(document).ajaxComplete(function(){
		$("#dynamic").click(function() {
		  $("input[name='ajaxfile']").click();
		});		
	})

	$('#dynamic').hover(
  function(){
  	   $('.ganti-text').css('color', '#ccc')
   }, 
  function() { 
       $('.ganti-text').css('color', 'transparent')
	});

	$('.ganti-text').hover(
  function(){
  	   $(this).css('color', '#ccc')
   }, 
  function() { 
       $(this).css('color', 'transparent')
	});
	</script>